<!--<div class='sjgf' ui-sref='home.index'>-->
    <!---->
<!--</div>-->
<!--<div class="login">-->
    <!--loading-->
    <div class="loading-box" ng-show=loding>
        <div class="loader">
            <div class="loader-inner ball-clip-rotate-multiple">
                <div></div>
                <div></div>
            </div>
        </div>
</div>

<div class="logboxworp">
    <div class="loginL">
        <img src="pub/img/00000.png" alt="" style="width: 220px;height: 220px;margin-top:80px;">
        <div style="margin-top: 40px;font-size: 36px;color: #5a6378">铸数工坊</div>
        <div style="font-size: 14px;color: #5a6378;margin-top: 10px;">极速铸造云端应用&nbsp;&nbsp;探究大数据应用之美</div>
    </div>
    <div class='loginbox'>
        <div class="modal-header">

            <h5 class="modal-title">
                登录 DataFoundry 账号
                <!--<a ng-click="cancel()" class="close"><span aria-hidden="true">&times;</span></a>-->
            </h5>
        </div>
        <div class="modal-body" style="padding: 20px 30px 30px 30px;">
            <form class="form-horizontal" name="frm">
                <div style="float:left;width:100%;margin-bottom: 18px;">
                        <span class="dropdown"  id="dpdtop" style="" ng-show="false">
                            <a class="dropdown-toggle" data-toggle="dropdown"  href="#" style="color:#333">{{curregion}}<b class="caret"></b></a>
                            <ul class="dropdown-menu dropdownbw">
                                <li ng-repeat="relist in regionlist" ng-click="checkregion(relist.region_describe,relist.identification)">{{relist.region_describe}}</li>
                            </ul>

                         </span>



                </div>
                <p class="modal-msg text-left" style="margin: 0 0 3px 0;font-size:12px;color:#5a6378;">
                    <span class="require">用户名</span>&nbsp;&nbsp;
                    <small ng-if="frm.username.$dirty && frm.username.$invalid" class="err-tip pull-right"><i class="fa fa-info-circle"></i>&nbsp;用户名不能为空</small>
                </p>
                <input name="username" style="font-size: 12px;" autocomplete="off" class="form-control loginfocus loginname" ng-model="credentials.username" required>

                <p class="modal-msg text-left" style="margin: 20px 0 3px 0;font-size:12px;color:#5a6378;">
                    <span class="require">密码</span>&nbsp;&nbsp;
                    <small ng-if="frm.password.$dirty && frm.password.$invalid" class="err-tip pull-right"><i class="fa fa-info-circle"></i>&nbsp;密码不能为空</small>
                </p>
                <input name="password" style="font-size: 12px;letter-spacing:6px;" autocomplete="off" type="password" class="form-control loginfocus"  ng-model="credentials.password" required>
                <div class="yanzheng" ng-if="loginyanzheng">
                    <p class="modal-msg text-left" style="margin: 20px 0 3px 0;font-size:12px;color:#5a6378;">
                        <span class="require">验证码</span>&nbsp;&nbsp;
                        <small ng-if="yzmchange&&frm.code.$dirty && frm.code.$error.required"
                               class="err-tip pull-right">
                            <i class="fa fa-info-circle"></i>&nbsp;验证码不能为空
                        </small>
                        <small ng-if="yzmchange&&loginerror.codeerror" class="err-tip pull-right"><i class="fa fa-info-circle"></i>&nbsp;验证码不正确
                        </small>
                    </p>
                    <div style="position: relative; height: 40px;width: 100%;">
                        <input name="code" style="float: left;width: 60%;font-size: 12px;"
                               type="text"
                               ng-blur="yzmchange=true"
                               ng-focus="yzmchange=false"
                               class="form-control loginfocus"
                               ng-model="vm.code" required/>
                        <div ng-click="changecode()" class="code">{{yzcode}}</div>
                    </div>
                </div>

                <button ng-if="loginyanzheng" class="btn btn-orange btn-block" ng-click="!loginerror.codeerror&&frm.$valid && login()" style="font-size:14px;margin: 18px 0 0 0; color: white">
                    登录
                </button>
                <button ng-if="!loginyanzheng" class="btn btn-orange btn-block" ng-click="frm.$valid && login()" style="margin: 30px 0 0 0; color: white">
                    登录
                </button>
            </form>
        </div>
        <div class="modal-footer" style="padding: 0;border: none;">
<!--             <div ng-if="!loginyanzheng">
                <div class="nocode" style="font-size: 16px; text-align: center;color: #5a6378;margin-top:40px;">没有&nbsp;DataFoundry&nbsp;账号?</div>
                <button ng-click="regist()" class="btn btn-block btn-regist" style="height:34px;">
                    立即注册
                </button>
            </div>
            <div ng-if="loginyanzheng">
                <div class="nocode" style="font-size: 14px; text-align: center;color: #5a6378;margin-top:20px;">没有&nbsp;DataFoundry&nbsp;账号?&nbsp;&nbsp;<span
                      ng-click="regist()" class="goregist">立即注册</span></div>
            </div> -->
        </div>
    </div>
</div>





    <!--<div style="margin:0 auto; padding-top: 40px; padding-bottom: 30px; width: 460px; position:relative">-->
        <!--<div class="line">-->
        <!--</div>-->
        <!--<img id="footerimg" src="views/login/img/image_09.png">-->
    <!--</div>-->
    <!--<button class="btn btn-success" ng-click="count()">开始进度</button>-->
    <!--<div ng-class="{progress: true, 'progress-striped': vm.striped}" class="col-md-4">-->
        <!--<div ng-class="['progress-bar', vm.style]" ng-style="{width: vm.value + '%'}">-->
            <!--<div ng-if="vm.showLabel">{{vm.value}}%</div>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->



<style>
    .nocode {
        margin:0px 0px 20px;
    }
    .modal-footer .havecode {
        margin:10px 0px 10px;
    }
    .goregist{
        color: #f6a540;
        cursor: pointer;
        font-weight: bold;
    }
    .goregist:hover{
       color: #5a6378
    }
    .sjgf {
        background: url('pub/img/login.png')no-repeat;
        width: 205px;
        height: 77px;
        margin: 0 auto;
        margin-top: -10px;
        background-size:contain;
    }
    body {
        background-color: #5a6378;
        padding-top:0px;
    }
    .code {
        /*background-color: rebeccapurple;*/
        width: 40%;
        height: 34px;
        float: left;
        text-align: right;
        word-spacing:8px;
        letter-spacing:8px;
        font-size: 20px;
        line-height: 34px;
        cursor: pointer;
    }
    #header {
        display: none;
    }
    .btn{
        padding: 7px 12px;
    }
    /*loading 动画*/
    .loading-box {
        position: fixed;
        /*overflow: hidden;*/
        top: 0;
        left: 0;
        height: 100%;
        /*top:100px;*/
        width: 100%;
        background-color: rgba(255, 255, 255, 0.7);
        z-index: 999;
    }
    .spinner {
        position:absolute;;
        height:76px;
        width: 76px;
        text-align: center;
        display: block;
        left:50%;top:50%;margin-left:-38px;margin-top:-38px;
    }
    .loginL{
        width: 449px;
        height: 490px;
        float: left;
        background: #dadfec;
        text-align: center;
    }
    .btn-regist{
        width: 300px;
        margin:0 auto;
        border:1px solid #5a6378;
        background: none;
        border-radius: 3px;;
        color:#5a6378 ;
    }
    .logboxworp{
        width: 810px;
        margin: 0 auto;
        margin-top: 60px;
        overflow: hidden;
        height:490px;
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-245px;
        margin-left:-405px;
    }
    .modal-footer{
        height: 175px;
        background-color: #eff1f7;
    }

    .modal-header{
        background-color: #e6e9f2;
        color: #5a6378;
        border: none;
        
    }
    .modal-title {
        font-size:16px;
        font-weight:bold;
        text-align: center;
    }
    .loginbox {
        background-color: #f7f8fb;
        width: 360px;
        float: left;
        height: 460px;

    }
    .btn-regist:hover {
        color: #fff;
        background: #55c45f;
        border:1px solid #55c45f;
    }
    .modal-default {
        margin-top: -200px;
    }
    .line {
        width: 100%;
        border-bottom: 1px solid #c9d0e2;
    }
    #footerimg {
        /*background-color: #f7f8fb;*/
        position: absolute;
        top: 26px;
        left:45%;
        height: 30px;
        width:50px;
        z-index: 5;
        padding: 0px 10px;
    }
    .loginfocus:focus{
        /*-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;*/
        /*border-color:#fff;*/
        /*-webkit-box-shadow:0 0 1px #fff;*/
    }
    .dropdownbw{
        min-width:94px;
        padding:0px;
        -webkit-box-shadow:none;
        border-radius:0;
    }
    .dropdownbw li{
        text-align: center;
        cursor: pointer;
        color: #5a6378;
        border-bottom:1px solid #ccc;
        height:34px;line-height:34px;padding:0;
    }
    .dropdownbw :last-child{
        border-bottom:none;
    }
    .dropdownbw li:hover{
        background: #e6e9f2;
    }
    #dpdtop:hover{
        background: #dde0e9;
    }
    #dpdtop{
        color: #5a6378;background:#e6e9f2;padding:8px 13px;
    }

</style>